<template>
<div>
  <div class="detailHead md_s_font">
    <p class="color_gray_02">
      <span style="font-weight:bold;margin-right: 0.5rem;display:inline-block;">{{ detailList.txnType || detailList.event | paymentTp }}</span>
      <span class="color_gray" v-if="detailList.txnType==='market' || detailList.typeName==='奖励金'">
        {{detailList.event | paymentTp2}}
        <span v-if="detailList.event === 'SHARE'">（{{detailList.verFlag === '1'? "核销前":"核销后"}}）</span>
      </span>
      <span class="color_gray" v-if="detailList.txnType!=='market' && detailList.typeName!=='奖励金'">{{detailList.txnType |  paymentTp2}}</span>
    </p>
    <div>
      <p class="color_gray_02 lg_m_font Amt" v-if="detailList.typeName == '提现' || detailList.typeName == '购券'"  :class="{color_gray_03: detailList.state === '1'}">
        {{detailList.txnType === 'transfer'? '-': '+'}}{{detailList.eventAmt || detailList.txnAmt || detailList.rollAmt}}
      </p>
      <p class="color_gray_02 lg_m_font Amt" v-else :class="{color_gray_03: detailList.state === '1'}">
        {{detailList.txnType === 'transfer'? '-': '+'}}{{detailList.eventAmt || detailList.txnAmt || detailList.rollAmt}}
      </p>
      <p class="color_gray_03 md_s_font" v-if="detailList.totalAmt">
        <span>（{{detailList.totalAmt}}）</span>
      </p>
    </div>
    <p class="money_state color_gray_03">
      <span class="decorate"></span>
      <span v-if="detailList.state === '0' || detailList.state_All === '0'">到账成功</span>
      <span v-if="detailList.state === '1' || detailList.state_All === '1'">待入账</span>
      <span class='decorate'></span>
    </p>
  </div>
  <div class="detailContent">
    <p>
      <span class="color_gray_03">类型</span>
      <span class="color_gray_02" v-if="detailList.txnType==='market' || detailList.typeName==='奖励金'">
        {{detailList.event | paymentTp2}}
      </span>
      <span class="color_gray" v-if="detailList.txnType!=='market' && detailList.typeName!=='奖励金'">{{detailList.txnType | paymentTp2}}</span>
    </p>
    <p v-if="detailList.event === 'SHARE'">
      <span class="color_gray_03">核销方式</span><span class="color_gray_02">{{detailList.verFlag === '1'? "核销前":"核销后"}}</span>
    </p>
    <p v-if="detailList.txnType == 3">
      <span class="color_gray_03">转入账号</span><span class="color_gray_02">招商银行（2122）</span>
    </p>
    <p>
      <span class="color_gray_03">交易时间</span><span class="color_gray_02">{{detailList.txnDateAndTxnTime || detailList.txnDate | strDate}}</span>
    </p>
    <p>
      <span class="color_gray_03">流水编号</span><span class="color_gray_02">{{detailList.marketSeqNo || detailList.seqNo || detailList.tranAcc}}</span>
    </p>
  </div>
</div>
</template>
<script>
import {
  Storage
} from '../../utils/storage.js'

export default {
  data: function() {
    return {
      detailList: '',
    }
  },
  created: function() {
    this.detailList = Storage.get("walletDetail", true);
  },
  beforeDestroy() {
    Storage.remove("walletDetail", true)
  }
}
</script>
<style scoped>
.detailHead {
  height: 12rem;
  background: #fff;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
}

.detailHead>p:nth-child(1) {
  padding-top: 1.5rem;
}

.detailHead div {
  margin: 0 0 1.2rem 0;
}

.detailContent {
  background: #fff;
  padding: 1rem;
}

.detailContent p {
  font-size: 1rem;
  line-height: 1.5rem;
  overflow: hidden
}

.detailContent p span:nth-child(1) {
  float: left;
}

.detailContent p span:nth-child(2) {
  float: right;
}

.money_state span {
  display: inline-block;
  padding: 0 1%;
}

.money_state span:nth-child(1),
.money_state span:nth-child(3) {
  width: 4rem;
  height: 0.1rem;
}

.money_state span:nth-child(1) {
  background: linear-gradient(to left, rgba(153, 153, 153, 0.8), rgba(153, 153, 153, 0));
}

.money_state span:nth-child(2) {
  position: relative;
  transform: translateY(25%);
}

.money_state span:nth-child(3) {
  background: linear-gradient(to right, rgba(153, 153, 153, 0.8), rgba(153, 153, 153, 0));
}
.Amt{
  font-weight:bold;
  margin:0.6rem 0 0.2rem;
}
</style>
